<template>
	<view
		class="detail_info"
		v-bind:class="mydata.commission.show && showagent && agentdata[0] > 0 ? 'bg7' : ''"
		:style="'margin:' + mydata.padding.top + 'rpx 0 ' + mydata.padding.bottom + 'rpx 0'"
	>
		<view class="commission" v-if="mydata.commission.show && showagent && agentdata[0] > 0">
			<text class="txt">{{ mydata.commission.text || '产品销售佣金：' }}</text>
			<text class="txt" v-if="agentdata[1]">{{ agentdata[0] }}~{{ agentdata[1] }}元</text>
			<text class="txt" v-else>{{ agentdata[0] }}元</text>
		</view>
		<view class="containers" :style="'background:' + mydata.color.bg">
			<view v-if="details.group" class=" group_floor u-flex u-p-l-20 u-p-r-20 main-bg">
				<view class="u-flex-3 u-flex u-flex-col u-col-top">
					<view class="u-font-30" style="font-weight: bold;"><text>限时拼团</text></view>
					<view>
						<text class="u-font-24">￥</text>
						<text class="u-font-36">{{ details.activity_price }}</text>
						<text class="de_price">￥{{ details.min_price }}</text>
					</view>
				</view>
				<view class="u-flex-1 u-flex u-row-center u-flex-col u-p-10" v-if="details.group">
					<view class="u-m-b-10">
						<text>{{ details.group.status == 0 ? '活动开始仅剩' : '距离结束仅剩' }}</text>
					</view>
					<view class="">
						<u-count-down
							separator-size="24"
							font-size="24"
							separator-color="#fff"
							bg-color="#fff"
							color="#000"
							:timestamp="details.time"
							@end="endtime"
							separator="zh"
						></u-count-down>
					</view>
				</view>
			</view>
			<view v-if="details.seckill" class=" group_floor u-flex u-p-l-20 u-p-r-20 main-bg">
				<view class="u-flex-3 u-flex u-flex-col u-col-top">
					<view class="u-font-30" style="font-weight: bold;"><text>限时秒杀</text></view>
					<view>
						<text class="u-font-24">￥</text>
						<text class="u-font-36">{{ details.activity_price }}</text>
						<text class="de_price">￥{{ details.min_price }}</text>
					</view>
				</view>
				<view class="u-flex-1 u-flex u-row-center u-flex-col u-p-10" v-if="details.seckill">
					<view class="u-m-b-10">
						<text>{{ details.seckill.status == 0 ? '活动开始仅剩' : '距离结束仅剩' }}</text>
					</view>
					<view class="">
						<u-count-down
							separator-size="24"
							font-size="24"
							separator-color="#fff"
							bg-color="#fff"
							color="#000"
							:timestamp="details.time"
							@end="endtime"
							separator="zh"
						></u-count-down>
					</view>
				</view>
			</view>
			<view v-if="details.presell" class=" group_floor u-flex u-p-l-20 u-p-r-20 main-bg">
				<view class="u-flex-3 u-flex u-flex-col u-col-top">
					<view class="u-font-30" style="font-weight: bold;"><text>预售商品</text></view>
					<view>
						<text class="u-font-24">￥</text>
						<text class="u-font-36">{{ details.activity_price }}</text>
						<text class="de_price">￥{{ details.min_price }}</text>
					</view>
				</view>
				<view class="u-flex-1 u-flex u-row-center u-flex-col u-p-10" v-if="details.presell">
					<view class="u-m-b-10">
						<text>{{ details.presell.status == 0 ? '活动开始仅剩' : '距离结束仅剩' }}</text>
					</view>
					<view class="">
						<u-count-down
							separator-size="24"
							font-size="24"
							separator-color="#fff"
							bg-color="#fff"
							color="#000"
							:timestamp="details.time"
							@end="endtime"
							separator="zh"
						></u-count-down>
					</view>
				</view>
			</view>
			<view class="top_floor u-p-t-20">
				<view>
					<view class="title-floor floor">
						<p class="title" :style="'color:' + mydata.color.title">{{ details.name }}</p>
					</view>
					<view class="desc-floor floor" :style="'color:' + mydata.color.desc">{{ details ? details.subtitle : '' }}</view>
				</view>
				<view class="share-collect" v-if="!details.ispoints">
					<block v-if="iscollect">
						<view @click="uncollect" class="flex_center" :style="'color:' + mydata.collect.color" v-if="mydata.collect && mydata.collect.show">
							<text class="txt" :class="mydata.collect.icon"></text>
							<text class="txt">{{ mydata.collect.text }}</text>
						</view>
					</block>
					<block v-else>
						<view @click="collect" class="flex_center" :style="'color:' + mydata.collect.bfcolor" v-if="mydata.collect && mydata.collect.show">
							<text class="txt" :class="mydata.collect.icon"></text>
							<text class="txt">{{ mydata.collect.text }}</text>
						</view>
					</block>

					<view @click="showshare" class="flex_center" :style="'color:' + mydata.share.color" v-if="mydata.share && mydata.share.show">
						<text class="txt" :class="mydata.share.icon"></text>
						<text class="txt">{{ mydata.share.text }}</text>
					</view>
				</view>
			</view>

			<view class="price-floor floor" v-if="!details.group&&!details.seckil&&!details.presell">
				<view>
					<view class="price-level" v-if="!details.ispoints">
						<text class="price" :style="'color:' + mydata.color.price">
							<text class="price-unit">￥</text>
							<text class="num">{{ details ? details.min_price : '' }}</text>
						</text>
						<view class="vip-price u-margin-left-20" v-if="details.now_level_price > 0">
							<text class="vip-name">会员价</text>
							<text>￥{{ details.now_level_price }}</text>
						</view>

						<view v-if="details.now_level_price == 0" class="del-price-money" :style="'color:' + mydata.color.del_price">
							<text class="origin-price-line">￥{{ details ? details.original_price : '' }}</text>
						</view>
					</view>
					<view class="price-level" v-else>
						<text class="price" :style="'color:' + mydata.color.price">
							<!-- 	<text class="price-unit">￥</text> -->
							<text class="num">{{ details ? details.min_price : '' }}</text>
							<text>积分</text>
						</text>
						<!-- <view class="del-price-money" :style="'color:' + mydata.color.del_price">
							<text class="origin-price-line">￥{{details?details.original_price:'' }}</text>
						</view> -->
					</view>
				</view>
			</view>

			<view class="express-floor floor">
				<!-- <text class="express txt" :style="'color:' + mydata.color.express">
					<text class="iconfont txt el-sc-yunfei "></text>
					<text class="floor-text txt" v-if="details.ispoints">运费：免运费</text>
					<text class="floor-text txt" v-else>运费：{{ details.ft_price }}元</text>
				</text> -->
				<text v-if="mydata.showsales" class="sales txt" :style="'color:' + mydata.color.sales">
					<text class=" txt iconfont el-sc-kehuxiaoliang3x "></text>
					<text class="floor-text txt">销量：{{ details.sell + (details.is_virtual ? details.virtual_sell : 0) }}</text>
				</text>
				<text v-if="mydata.showaddr && details.inventory_type != 2" class="addr txt" :style="'color:' + mydata.color.addr">
					<text class="txt iconfont el-sc-kucun3 "></text>
					<text class="txt floor-text" v-if="details.has_sku">库存：{{ details.total }}</text>
					<text class="txt floor-text" v-else>库存：{{ details.total - details.sell }}</text>
				</text>
			</view>
			<view
				@click="tovip"
				class="vippirce"
				v-if="details.now_level_price > 0 && (userInfo.level == 0 || !userInfo.level) && mydata.memberprice.show"
				:style="'background:' + mydata.memberprice.bg_color"
			>
				<text :style="'color:' + mydata.memberprice.text_color">{{ mydata.memberprice.text }}</text>
				<text class="price" :style="'color:' + mydata.memberprice.price_color">￥{{ details.now_level_price }}</text>
			</view>
			<view class="express-floor main-color" v-if="details.presell&&details.send_at">
				<text v-if="details.send_at[0]==1">预售商品发货时间：{{details.send_at[1]}} 开始发货</text>
				<text v-if="details.send_at[0]==2">预售商品发货时间：付款成功{{details.send_at[2]}}天后开始发货</text>
			
			</view>
		</view>
		<view class="collage-div" v-if="details.collage && details.collage.length > 0">
			<view @click="showgroup" class="u-flex u-row-between u-p-t-20 u-p-b-20">
				<text>拼团列表</text>
				<view class="u-flex">
					<text>查看更多</text>
					<text class="iconfont el-sc-gengduo"></text>
				</view>
			</view>
			<block v-for="(item, i) in details.collage">
				<view v-if="item.time > 0 && i < 3" class="u-flex u-row-between collage-item" :key="i">
					<view class="u-flex">
						<image class="_image" :src="item.user.picurl"></image>
						<view class="u-flex u-flex-col u-col-top u-row-between u-m-l-20 collage-text">
							<text class="u-line-1" style="width: 220rpx;">{{ item.user.nickname }}</text>
							<text class="group_div">{{ item.success_num + 1 }}人团</text>
						</view>
					</view>
					<view class="u-flex">
						<view class="u-flex u-flex-col u-col-top u-m-r-20 u-row-between collage-text">
							<view class="u-flex">
								还差
								<text class="main-color u-font-30 u-m-l-6 u-m-r-6">{{ item.success_num - item.num }}人</text>
								成团
							</view>
							<view class="">
								<text class="u-m-r-10" style="color: #969696;">还剩</text>
								<u-count-down @end="endtime" separator-size="20" font-size="20" bg-color="#fff" color="#969696" :timestamp="item.time"></u-count-down>
							</view>
						</view>
						<u-button type="primary" shape="circle" size="mini" @click="togroupdetail(item.id)">去参团</u-button>
					</view>
				</view>
			</block>
			<view class="u-p-b-14 u-font-24 u-p-t-14"><text>拼团规则：支持开团邀请好友参团，人数不足自动退款</text></view>
		</view>
		
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';

export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			isshow: false,
			agentdata: [],
			showagent: false,
			iscollect: false,
			loading: false,
			agentExplain: {}
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.userInfo,
			details: state => state.details
		})
	},
	mounted() {
		var _this = this;
		this.judgeLogin(
			() => {},
			() => {
				if (!_this.details.ispoints) {
					_this.getjuris('agentExplain').then(a => {
						_this.agentExplain = a;
						_this.showagent = this.showcommission();
					});
					_this.usercollect();
				}

				// _this.usercollect();
			}
		);
		// this.usercollect();
	},
	methods: {
		togroupdetail(id) {
			this.Jumpurl({
				type: 1,
				link: '../groupdetial/groupdetial?id=' + id,
				login_type: 2
			});
		},
		tovip() {
			this.Jumpurl({
				link: '../user/index',
				type: 1,
				login_type: 2
			});
		},
		//收藏
		collect() {
			if (this.loading) {
				return;
			}
			this.loading = true;
			this.$http('/user/collect/' + this.details.id, {}, 'POST').then(res => {
				uni.showToast({
					title: '收藏成功',
					icon: 'none'
				});
				this.usercollect();
			});
		},
		uncollect() {
			if (this.loading) {
				return;
			}
			this.loading = true;
			this.$http('/user/collect/' + this.details.id, {}, 'DELETE').then(res => {
				uni.showToast({
					title: '取消收藏成功',
					icon: 'none'
				});
				this.usercollect();
			});
		},
		usercollect() {
			this.$http('/user/collect/' + this.details.id, {}, 'GET').then(res => {
				this.iscollect = res.data.msg;
				this.loading = false;
			});
		},
		endtime() {
			this.$emit('change', 'timeout');
		},
		showgroup() {
			this.$emit('change', 'showgroup');
		},
		agentcommodity() {
			let data = {
				commodity: this.details.id
			};
			this.$http('/goods/commodity', data, 'GET').then(res => {
				if (res.statusCode == 401) {
				} else {
					this.agentdata = res.data.msg;
				}
			});
		},

		showshare() {
			this.$emit('change', 'share');
		},
		showcommission() {
			if (this.agentExplain.is_show_profit == 0) {
				return false;
			}
			if (this.agentExplain.is_show_profit == 1) {
				if (!!this.userInfo.agent_id) {
					this.agentcommodity();
				}
				return !!this.userInfo.agent_id;
			}
			if (this.agentExplain.is_show_profit == 2) {
				this.agentcommodity();
				return true;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.commission {
	text-align: center;
	height: 40rpx;
	color: #ffffff;
	font-size: 26rpx;
	.txt {
		line-height: 40rpx;
	}
	.txt:first-child {
		letter-spacing: 12rpx;
	}
}

.detail_info {
	width: 100%;
	&.bg7 {
		background: rgba(0, 0, 0, 0.6);
	}
	.containers {
		padding: 0rpx 0rpx 16rpx 0rpx;
		width: 100%;
		box-sizing: border-box;
		// border-radius: 40rpx 40rpx 0 0;
	}
	.group_floor {
		.de_price {
			font-size: 24rpx;
			text-decoration: line-through;
			margin-left: 10rpx;
		}
	}
	.top_floor {
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
	}
	.price-floor {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		// margin: 8px auto 16px;
		padding: 0 24rpx;
		.price-level {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;

			.price {
				font-size: 32rpx;

				.price-unit {
					font-size: 26rpx;
				}

				.num {
					margin-left: -4px;
					font-weight: bold;
					font-style: normal;
					font-size: 36rpx;
					line-height: 68rpx;
				}
			}

			.level {
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 0 14rpx 8rpx;
				border-radius: 2rpx;
				padding: 0 8rpx 0 0;
				min-width: 80rpx;
				width: fit-content;
				height: 26rpx;
				line-height: 26rpx;
				color: #ffe382;
				background: #565656;
				.icon-m-huangguan {
					height: 16rpx;
					line-height: 8rpx;
					text-align: center;
				}
				.level-name {
					font-size: 20rpx;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}
		.del-price-money {
			display: inline-block;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: bold;
			font-size: 26rpx;
			line-height: 34rpx;
			color: #969696;
			position: relative;
			text-decoration: line-through;
			.origin-price-line {
				text-decoration: line-through;
			}
		}
	}
	.floor {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: nowrap;
	}
	.title-floor {
		width: 500rpx;
		margin-bottom: 16rpx;
		.title {
			color: #212121;
			width: 0;
			flex: 1;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #212121;
		}
	}
	.desc-floor {
		width: 500rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #969696;
		margin-bottom: 16rpx;
	}
	.share-collect {
		display: flex;
		.flex_center {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 26rpx;
			margin-left: 36rpx;
			justify-content: flex-start;
		}
		.txt {
			font-size: 40rpx;
			margin-bottom: 12rpx;
		}
		.txt:last-child {
			font-size: 20rpx;
		}
	}
	.express-floor {
		justify-content: space-between;
		color: #969696;
		padding: 0 24rpx;
		.txt {
			line-height: 34rpx;
			font-size: 24rpx;
			color: #969696;
		}

		.floor-text {
			margin-left: 8px;
		}
	}
}
// .vippirce{
//       border-radius: 60rpx;
//       background: #f5f5f5;
//       padding: 16rpx 20rpx;
//       font-size: 24rpx;
//       margin-top:20rpx;
// 	  .price{
// 		  font-weight:bold;
// 			margin-left:10rpx;
// 			font-size:30rpx
// 	  }
// }
.vippirce {
	border-radius: 30px;
	padding: 16rpx 20rpx;
	font-size: 24rpx;
	margin-top: 20rpx;
	align-items: center;
	display: flex;
	.price {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}
}
.collage-div {
	// margin-top: 10rpx;
	padding: 0 24rpx;
	background-color: #ffffff;
	.collage-item {
		border-top: 2rpx solid #e6e7eb;
		padding: 20rpx 0;
		._image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
		.u-line-1 {
			// width: 220rpx;
		}
		.collage-text {
			height: 90rpx;
		}
	}
	.group_div {
		border: 2rpx solid var(--main-color);
		color: var(--main-color);
		padding: 2rpx 8rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
	}
}
.main-bg {
	background: var(--main-color);
	color: #fff;
}
// .main-color{
// 	color: var(--main-color)
// }
</style>
